Skip to main content

2、处理文本

文本是任何App的一个基础。

本章我们将介绍：

  • Text
  • TextField
  • SecureField

准备​

创建一个名为FormattedText的新 SwiftUI 项目。

怎么做…​

首先将Text用VStack包裹一下

struct ContentView: View {
var body: some View {
        VStack{
            Text("Hello World")
        }
    }
}

然后添加一个fontWeight modifier。

Text("Hello World").fontWeight(.medium)

添加两个个state

@State var password = ""
@State var someText = ""

添加一个Text和SecureField, 用Text显示SecureField的输入

SecureField("Enter a password", text: $password).padding()
Text("password entered: \(password)").italic()

添加一个Text和TextField，用Text显示TextField的输入

TextField("Enter some text", text: $someText).padding()
Text("\(someText)").font(.largeTitle).underline()

再尝试一下其他modifier

Text("Changing text color and make it bold").foregroundColor(Color.blue).bold()
Text("Use kerning to change space between lines of text").kerning(7)
Text("Changing baseline offset").baselineOffset(100)
Text("Strikethrough").strikethrough()
Text("This is a multiline text implemented in SwiftUI. The trailing modifier was added to the text. This text also implements multiple modifiers")
    .background(Color.yellow)
    .multilineTextAlignment(.trailing)
    .lineSpacing(10)

image-20211219140147411

How it works…​

Text有关于font，spacing等相关的Modifier。TextFiled和SecureField都需要一个State来存储输入，我们可以使用@State来声明一个State。SwiftUI会在State改变时，自动刷新UI。

我们通过$来绑定State。

  TextField("Enter some text", text: $someText)

There's more…​

我们继续添加Text，当子视图超过10个时，就会报错。原来是SwiftUI只支持最大10个子视图。所以此时，我们需要使用Group来分割我们的子视图。